<!DOCTYPE html>
<html lang="<%= I18n.locale %>" data-controller="i18n">
  <head>
    <title><%= @title || site_name %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= tag.meta name: "csp-nonce", content: content_security_policy_nonce if content_security_policy_nonce %>
    <%= favicon_link_tag "roundel.svg" %>
    <%= tag.link rel: "apple-touch-icon", href: asset_path("square-180.png") %>
    <%= tag.meta name: "apple-mobile-web-app-title", content: site_name %>
    <%= javascript_include_tag "application", nonce: true, defer: true %>
    <%= stylesheet_link_tag "themes/#{SiteSettings.validated_theme}", nonce: true %>
    <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
    <%= tag.meta name: "robots", content: @indexing_directives if @indexing_directives.presence %>
    <%= yield :head %>
  </head>

  <body class="<%= "#{SiteSettings.validated_theme}-theme" %>" data-controller="tour">
    <%= skip_link "content", t(".skip_to_content") %>
    <%= render "application/navbar" %>
    <%= yield :breadcrumbs %>
    <main class="container-fluid" id="content">
      <div id="alerts" aria-live="polite">
        <% if notice %>
          <p class="alert alert-info">
            <%= Icon icon: "info-circle-fill", label: t(".alert.info") %>
            <%= notice %>
          </p>
        <% end %>
        <% if alert %>
          <p class="alert alert-danger">
            <%= Icon icon: "x-octagon-fill", label: t(".alert.danger") %>
            <%= alert %>
          </p>
        <% end %>
      </div>
      <div class="pt-3">
        <%= yield %>
      </div>
    </main>
    <%= render "application/footer" %>
  </body>
</html>
